<template>
  <view class="container" v-if="product">
    <view>
      <image class="product-image" :src="product.image" mode="aspectFill" />
    </view>
    <view class="info-section">
      <view class="product-info">
        <view class="title">{{ product.name }}</view>
        <!-- <p clss="price">{{ product.price }}</p> -->
        <uni-rate size="16" :readonly="true" :value="product.score" @change="onChange" />
        <view v-if="product.desc" class="desc">{{ product.desc }}</view>
        <view class="action-bar">
          <view class="update-time">菜谱更新于：2025-04-12</view>
          <view class="del-btn">删除</view>
          <view class="edit-btn">编辑</view>
        </view>
      </view>
    </view>
    <view class="add">
      <button class="add-btn" @click="addToCart">加入购物车</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useProductStore } from "../../stores/product";
import { useCartStore } from "../../stores/cart";

const productStore = useProductStore();
const cartStore = useCartStore();
const product = ref(null);
const rateValue = ref(3);
const option = ref({});

onLoad(async (options) => {
  option.value = options;
  if (!productStore.products.length) {
    await productStore.fetchProducts();
  }

  if (!options?.id) {
    uni.showToast({
      title: "参数错误",
      icon: "error",
    });
    uni.navigateBack();
  }

  const targetProduct = productStore.getProductById(Number(options.id));
  if (!targetProduct) {
    uni.showToast({
      title: '商品不存在',
      icon: 'none'
    })
    setTimeout(() => uni.navigateBack(), 1500)
  }
  product.value = targetProduct;
});
//规格选择
const selectedSpecs = ref({});

//删除商品
const deleteProduct = () => {
  productStore.deleteProduct(product.value.id);
  uni.navigateBack();
};


//编辑商品
const editProduct = () => {
  uni.navigateTo({
    url: `/pages/edit/index?id=${product.value.id}`,
  });
};

const addToCart = () => {
  // cartStore.addItem({
  //   ...product.value,
  //   specs: selectedSpecs.value,
  // });
  const currentIndex = productStore.products.findIndex((p) => p.id === Number(option.value.id));
  console.log("🚀 ~ addToCart ~ currentIndex:", currentIndex)

  productStore.products[currentIndex].quantity++;

  uni.showToast({
    title: "添加成功",
  });
  uni.navigateBack()
};
</script>

<style lang="scss" scope>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;

  .product-image {
    width: 100%;
    object-fit: cover;
    height: 450rpx;
  }

  .info-section {
    flex: 1;
    top: 400rpx;
    background: #fff;
    border-radius: 30rpx;
    width: 100%;
    height: calc(100% - 400rpx);

    .product-info {
      padding: 40rpx 20rpx;

      .title {
        padding-bottom: 20rpx;
        font-size: 36rpx;
        line-height: 1.4;
        color: #333;
      }

      .desc {
        padding-top: 30rpx;
        font-size: 24rpx;
        color: #666;
        line-height: 1.6;
      }

      .action-bar {
        display: flex;
        align-items: center;
        gap: 12px;

        .del-btn,
        .edit-btn {
          margin: 0;
          padding: 0;
          padding: 6px 12px;
          border-radius: 4px;
          border: 1px solid #ddd
        }

        .edit-btn {
          margin-left: auto;
        }

        .update-time {
          color: #666;
          font-size: 14px;
        }
      }


    }
  }

  .add {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 200rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .add-btn {
      width: 80%;
      height: 80rpx;
      background-color: var(--primary-color);
      line-height: 80rpx;
      text-align: center;
      border-radius: 40rpx;
      color: #fff;
    
    }
  }
}
</style>
